// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

/**
 * 场景主类
 * 管理场景背景切换，场景物体小物件，场景粒子效果等
 */
@ccclass
export default class Game extends cc.Component {

    // 背景
    @property(cc.Sprite)
    bg: cc.Sprite = null;

    // 用到的背景数组
    @property([cc.SpriteFrame])
    bgArr: Array<cc.SpriteFrame> = []

    // 主题数组
    @property([cc.Node])
    bgNodeArr: Array<cc.Node> = []

    // 水波纹动画
    @property(cc.Node)
    bgNodeShuiBoWen: cc.Node

    // 鱼
    @property(cc.Node)
    fishNode: cc.Node

    // 水波纹执行时间变量
    timeRundom: number
    timeShuiBoWen: number

    // 鱼儿执行时间变量
    timeFishRundom: number
    timeFish: number

    // 鱼头
    posBegin: cc.Vec2
    posEnd: cc.Vec2

    // 粒子特效数组
    @property(cc.ParticleSystem)
    particleArr: Array<cc.ParticleSystem> = []

    // 鱼的动画
    playFish(){
        this.fishNode.stopAllActions()
        let fishNodes = this.fishNode.children
        for (let index = 0; index < fishNodes.length; index++) {
            fishNodes[index].active = false;
        }
        let pickFish = fishNodes[Math.floor(Math.random() * 3)]
        pickFish.active = true

        let actions = [
            [
                cc.v2(420,568),
                cc.v2(-70,345),
                cc.v2(-460,650),
            ],
            [
                cc.v2(-300,650),
                cc.v2(166,46),
                cc.v2(-180,-828),
            ],
            [
                cc.v2(450,40),
                cc.v2(-170,-780),
            ],
            [
                cc.v2(-500,-227),
                cc.v2(100,-747),
                cc.v2(300,700),
            ]
        ]
        let actionsTime = [5,7,3.5,8];
        let rIndex = Math.floor(Math.random() * 3)

        let endS = cc.cardinalSplineTo(actionsTime[rIndex], actions[rIndex], 0)

        // let a1 = cc.moveTo(3, 100,100)
        // let a2 = cc.moveTo(3, 0,0)
        // let a3 = cc.moveTo(3, -100,-150)
        // let a4 = cc.moveTo(3, 0,0)
        // let endS = cc.sequence(a1,a2,a3,a4)
        this.fishNode.runAction(endS)
    }

    // 波纹动画
    playShuiBoWenAnimation(){
        // 显示动画组件
        this.bgNodeShuiBoWen.active = true

        // 随机节点显示位置
        let y = Math.random() * 1280 - 640
        let x = Math.random() * 720 - 360

        // 设置位置
        this.bgNodeShuiBoWen.setPosition(cc.v2(x,y))

        // 播放默认的动画
        this.bgNodeShuiBoWen.getComponent(cc.Animation).play()

    }

    // 主界面点击事件
    btnCallBack(sender, str){
        if (str == 'btnPlay') {
            
        }else{
            console.log(sender, str);
            // 每次点击时，先隐藏掉主题节点
            this.allBgNodeHide()
            this.allParticleNodeHide()
    
            // 每次点击时，切换背景和主题节点
            let flag = true
            while (flag) {
                let num = Math.floor(Math.random() * 10 )
                console.log('场景：',num);
                if (this.bg.spriteFrame != this.bgArr[num]) {
                    flag = false
                    this.bg.spriteFrame = this.bgArr[num]
                    this.bgNodeArr[num].active = true
    
                    if (num == 0 || num == 5) {
                        // 0 , 5 场景没有粒子特效
                        continue
                    }else{
                        if (num == 7) {
                            // 7场景的粒子特效用到了0的场景的粒子节点
                            this.particleArr[0].node.active = true
                        }
                        this.particleArr[num].node.active = true
                    }
                    
                }
            }
        }
    }

    // 隐藏所有场景节点
    allBgNodeHide(){
        for (let index = 0; index < this.bgNodeArr.length; index++) {
            this.bgNodeArr[index].active = false
        }
    }


    // 隐藏所有粒子特效
    allParticleNodeHide(){
        for (let index = 0; index < this.particleArr.length; index++) {
            this.particleArr[index].node.active = false
        }
    }

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        // 所有节点先隐藏
        this.allBgNodeHide()
        this.allParticleNodeHide()
        // 随机背景显示
        // let num = Math.floor(Math.random() * 10 )
        // this.bg.spriteFrame = this.bgArr[num]
        this.bgNodeArr[0].active = true

        // 随机波纹动画控制
        this.timeShuiBoWen = 0
        // 1s=60帧数，300帧数=5s，算法得到一个值=5s~15s之间的帧数
        this.timeRundom = 300 + Math.random() * 600

        // 鱼儿游动动画控制
        this.timeFish = 0
        // 1s=60帧数，480帧数=8s，算法得到一个值=8s~18s之间的帧数
        this.timeFishRundom = 480 + Math.random() * 600
        
        this.posBegin = cc.v2(0,0)

    }

    start () {
        this.playFish()
    }

    update (dt) {
        // 累加当前帧数
        this.timeShuiBoWen++
        
        // 当前帧数大于要之前随机的指定帧数时
        if (this.timeShuiBoWen > this.timeRundom) {
            console.log('水波纹出来了');
            this.timeShuiBoWen = 0
            this.timeRundom = 300 + Math.random() * 600
            this.playShuiBoWenAnimation()
        }

        // 累加当前帧数
        this.timeFish++
        
        // 当前帧数大于要之前随机的指定帧数时
        if (this.timeFish > this.timeFishRundom) {
            console.log('鱼儿出来了');
            this.timeFish = 0
            this.timeFishRundom = 480 + Math.random() * 600
            this.playFish()
        }

        
        // 鱼头角度计算
        this.posEnd = cc.v2(this.fishNode.x,this.fishNode.y)
        
        if (this.posBegin.x != this.posEnd.x && this.posBegin.y != this.posEnd.y ) {
            // 通过这两个点，算出鱼的角度
            var angleFish = this.getAngle(this.posBegin, this.posEnd)
            // 然后调整鱼的角度
            this.fishNode.angle = - angleFish
        }
        
        this.posBegin = this.posEnd
    }

    // 计算角度
    getAngle(start:cc.Vec2,end:cc.Vec2){
        var x = end.x - start.x
        var y = end.y - start.y

        var hypotenuse = Math.sqrt(x*x + y*y)
    
        var cos = x / hypotenuse
        var radian = Math.acos(cos)
    
        //求出弧度
        var angle = 180 / (Math.PI / radian)
        //用弧度算出角度
        if(y < 0){
            angle = 0-angle
        }else if(y == 0 && x < 0){
            angle = 180
        }
        return 90-angle
    }
}
